<template>
  <div id="category">
    <div style="margin: 20px">
      <el-button type="primary" @click="importFile">导入</el-button>
      <el-button type="success" @click="exportDatas">导出</el-button>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="fetchData"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="名称" />
        <el-table-column label="图标">
          <template #default="scope">
            <el-image :src="scope.row.imageUrl" style="width: 50px" />
          </template>
        </el-table-column>
        <el-table-column prop="orderNum" label="排序" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <div v-if="scope.row.status === 1">
              <el-button type="success" disabled>正常</el-button>
            </div>
            <div v-else>
              <el-button type="info" disabled>失效</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
      </el-table>
    </div>
    <!--    上传文件弹窗-->
    <el-dialog v-model="dialogVisibleUpload" title="分配菜单" width="30%">
      <el-upload
        class="upload-demo"
        drag
        action="http://localhost:8080/admin/product/categoryFileUpload"
        multiple
        :headers="headers"
        :on-success="importSuccess"
      >
        <el-icon class="el-icon--upload">
          <upload-filled />
        </el-icon>
        <div class="el-upload__text">
          Drop file here or
          <em>click to upload</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500kb
          </div>
        </template>
      </el-upload>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { findProductByParentId, exportData } from '@/api/category.js'
import { UploadFilled } from '@element-plus/icons-vue'
import { useApp } from '@/pinia/modules/app'
import { ElMessage } from 'element-plus'

// 从pinia中获取token，在进行文件上传的时候将token设置到请求头中
const headers = {
  token: useApp().authorization.token,
}

onMounted(async () => {
  await getCategorys()
})
const fetchData = async (row, treeNode, resolve: (data: any[]) => void) => {
  const { data } = await findProductByParentId(row.id)
  resolve(data)
}
const getCategorys = async () => {
  const { data } = await findProductByParentId(0)
  tableData.value = data
}
const tableData: any[] = ref([])

// 上传文件
const dialogVisibleUpload = ref(false)

const importFile = () => {
  dialogVisibleUpload.value = true
}
const importSuccess = async () => {
  dialogVisibleUpload.value = false
  await getCategorys()
}

// 导出
const exportDatas = async () => {
  const res = await exportData()
  const blob = new Blob([res])
  const link = document.createElement('a')
  link.href = window.URL.createObjectURL(blob)

  link.download = '分类数据.xlsx'
  link.click()
}
</script>
